<template>
  <ul class="index-bar-ul">
    <li
      :class="defaultIndex == index ? 'index-bar-active' : ''"
      v-for="(item, index) in indexBarNames.indexBarData"
      :key="index"
      @click="indexBarChange(index)"
    >
      {{ item }}
    </li>
  </ul>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

// 父组件传来的值
const indexBarNames = defineProps(["indexBarData", "skipName"]);

// 默认选中0
const defaultIndex = ref(0);

// 监听路由改变 修改选中下标
watch(
  () => route.path,
  (newV) => {
    indexBarNames.skipName.forEach((ele, i) => {
      if (newV.indexOf(ele) != -1) {
        defaultIndex.value = i;
      }
    });
  },
  { deep: true, immediate: true }
);

// 下标改变时
const indexBarChange = (index) => {
  defaultIndex.value = index;
  router.push({
    name: indexBarNames.skipName[index],
  });
};
</script>
<style lang="less">
.index-bar-ul {
  display: flex;
  align-items: baseline;
  position: fixed;
  top: 60px;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: white;
  z-index: 99;

  li {
    font-size: 16px;
    margin-right: 20px;
    transition: all 0.4s;

    &:hover {
      cursor: pointer;
    }
  }

  .index-bar-active {
    position: relative;
    font-weight: 900;
    font-family: "黑体";
    color: #000000da;
    font-size: 18px;

    &::before {
      content: "";
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      display: block;
      width: 58px;
      height: 3px;
      background-color: #ec4141;
    }
  }
}
</style>